<template>
  <!-- 按下屏幕事件 touchstart -->
  <!-- 离开屏幕事件 touchend -->
  <view @touchstart="handleTouchstart" @touchend="handleTouchend"> hello </view>
</template>

<script>
/*
滑动组件的实现思路：
1、给容器绑定两个触屏事件 touchstart 和 touchend
2、用户按下触屏事件
    ① 记录用户按下屏幕的时间 Date.now() 时间戳 返回 1970-1-1 到现在的毫秒数
    ② 记录用户按下的屏幕坐标 x 和 y
3、用户离开屏幕事件
    ① 记录用户离开屏幕的时间 Date.now()
    ② 记录用户离开屏幕的坐标 x 和 y
    ③ 根据两个时间 运算 判断 用户按下屏幕时长是否合法
    ④ 根据两对坐标 判断距离是否合法 判断滑动的方向
 */
export default {
  data() {
    return {
      // 按下屏幕的时间
      startTime: 0,
      // 按下屏幕的坐标
      startX: 0,
      startY: 0
    };
  },
  methods: {
    /* 用户按下屏幕 */
    handleTouchstart(event) {
      // console.log("按下了屏幕");
      this.startTime = Date.now();
      // 屏幕按下去的坐标
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
      /*console.log("按下", event.changedTouches[0].clientX);
      console.log("按下", event.changedTouches[0].clientY);*/
    },
    /* 用户离开屏幕 */
    handleTouchend(event) {
      // console.log("离开了屏幕");
      const endTime = Date.now();
      const endX = event.changedTouches[0].clientX;
      const endY = event.changedTouches[0].clientY;

      /*console.log("离开", event.changedTouches[0].clientX);
      console.log("离开", event.changedTouches[0].clientY);*/

      // 判断按下的时长(以时间戳计算 1000等于1s)
      if(endTime - this.startTime > 2000){
          retrun;
      }

      // 滑动的方向(变量)
      let direction = "";

      // 判断用户滑动的距离(单位为像素)是否合法。如果合法再判断滑动的方向(注意距离需要加上绝对值)
      if(Math.abs(endX - this.startX) > 10){
          // 判断滑动方向
          direction = (endX - this.startX) > 0 ? "right" : "left";
      }else{
          return;
      }

      // 到这里表示，用户做了合法的滑动操作
      console.log("debug => ",direction);
    },
  },
};
</script>

<style lang="scss">
view {
  width: 100%;
  height: 500rpx;
  background-color: aqua;
}
</style>